<template>
  <div style="margin:20px;">
    <el-row style="text-align:center">
      <el-col :span="6">
        <el-card>
          <h4>总业绩</h4>
          <p>{{Number(totalInfo.Total).toFixed(2)}}元</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h4>剩余奖学金</h4>
          <p>{{Number(totalInfo.balance).toFixed(2)}}元</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click="showWithdrawNumber()">
          <h4>提现申请/通过次数</h4>
          <p
            style="text-decoration:underline;cursor:pointer"
          >{{Number(totalInfo.WithdrawNumber).toFixed(2)}}次</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <h4>已提现金额</h4>
          <p>{{Number(totalInfo.WithdrawAmount).toFixed(2)}}元</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h4>旗下员工</h4>
        <div>
          <el-table :data="staffData" border style="width: 100%">
            <el-table-column align="center" label="姓名">
              <template slot-scope="scope">
                <p>
                  {{scope.row.realName == null ?scope.row.nickname :scope.row.realName}}
                  <br />
                  电话：{{scope.row.mobile}}
                </p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="下线客户人数">
              <template slot-scope="scope">
                <p
                  style="text-decoration:underline;cursor:pointer"
                  @click="showCustomer(scope.row)"
                >{{scope.row.number}}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="员工总业绩/奖金">
              <template slot-scope="scope">
                <p>{{Number(scope.row.performance).toFixed(2)}}/{{Number(scope.row.performanceAmount).toFixed(2)}}</p>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog :title="staffName+'的客户'" :visible.sync="isShowCustomer" width="50%">
            <span>客户列表</span>
            <el-table :data="customerData" border style="width: 100%">
              <el-table-column align="center" prop="nickname" label="客户姓名"></el-table-column>
              <el-table-column align="center" prop="price" label="消费情况"></el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="isShowCustomer = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="12">
        <h4>招商列表</h4>
        <div>
          <el-table :data="companyData" border style="width: 100%">
            <el-table-column align="center" label="代理商姓名">
              <template slot-scope="scope">
                <p>
                  {{scope.row.realName == null ?scope.row.nickname :scope.row.realName}}
                  <br />
                  电话：{{scope.row.mobile}}
                </p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="身份">
              <template slot-scope="scope">
                <p>{{scope.row.vipType == 3 ?'合伙人' :scope.row.vipType ==5 ?'事业部' :scope.row.vipType ==6 ?'分公司' :'' }}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="招商业绩/奖金">
              <template slot-scope="scope">
                <span>{{Number(scope.row.payMoney).toFixed(2)}}/{{Number(scope.row.amount).toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h4>旗下渠道</h4>
        <div>
          <el-table :data="channelData" border style="width: 100%">
            <el-table-column align="center" label="代理商姓名">
              <template slot-scope="scope">
                <p>
                  {{scope.row.realName == null ?scope.row.nickname :scope.row.realName}}
                  <br />
                  电话：{{scope.row.mobile}}
                </p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="身份">
              <template slot-scope="scope">
                <p>{{scope.row.vipType == 3 ?'合伙人' :scope.row.vipType ==5 ?'事业部' :scope.row.vipType ==6 ?'分公司' :'' }}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="零售业绩/奖金">
              <template slot-scope="scope">
                <span>{{Number(scope.row.performance).toFixed(2)}}/{{Number(scope.row.performanceAmount).toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="招商业绩/奖金">
              <template slot-scope="scope">
                <span>{{Number(scope.row.Merchants).toFixed(2)}}/{{Number(scope.row.MerchantsAmount).toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <h4>招商达标</h4>
        <div v-if="false">招商未达标，暂无数据</div>
        <el-table v-else :data="targetData" border style="width: 100%">
          <el-table-column align="center" label="代理商姓名">
            <template slot-scope="scope">
              <p>
                {{scope.row.realName == null ?scope.row.nickname :scope.row.realName}}
                <br />
                电话：{{scope.row.mobile}}
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="身份">
            <template slot-scope="scope">
              <p>{{scope.row.vipType == 3 ?'合伙人' :scope.row.vipType ==5 ?'事业部' :scope.row.vipType ==6 ?'分公司' :'' }}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="业绩总额">
            <template slot-scope="scope">
              <p>{{Number(scope.row.Total).toFixed(2)}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="奖金">
            <template slot-scope="scope">
              <p>{{Number(scope.row.price).toFixed(2)}}</p>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { message, staff } from "@/api/member";
export default {
  data() {
    return {
      isShowCustomer: false,
      isShowWithdrawNumber: false,
      customerData: [],
      staffName: "",
      staffData: [],
      companyData: [],
      channelData: [],
      targetData: [],
      totalInfo: {
        Total: null,
        WithdrawAmount: null,
        WithdrawNumber: null,
        balance: ""
      }
    };
  },
  methods: {
    showWithdrawNumber() {
      this.isShowWithdrawNumber = true;
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
    showCustomer(item) {
      staff(item.userId).then(res => {
        this.customerData = res.data.data;
      });
      this.isShowCustomer = true;
      this.staffName = item.realName == null ? item.nickname : item.realName;
    },
    getData() {
      message(this.$router.query.id).then(res => {
        this.staffData = res.data.data.isStaff;
        this.companyData = res.data.data.agency;
        this.channelData = res.data.data.channel;
        this.targetData = res.data.data.target;
        this.totalInfo = {
          Total: res.data.data.list.Total,
          WithdrawAmount: res.data.data.list.WithdrawAmount,
          WithdrawNumber: res.data.data.list.WithdrawNumber,
          balance: res.data.data.list.balance
        };
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style>
</style>